<template>
      <div class="googof_list">
          <!-- 轮播图商品展示区域 -->
          <div class="mui-card">
            <div class="mui-card-content">
                <div class="bander">
                    <mt-swipe :auto="3000">
                        <mt-swipe-item v-for = "(item,index) in goodbanderList" :key="index">
                        <img :src="item.src" alt="">
                        </mt-swipe-item>          
                    </mt-swipe>
                </div>
            </div>
          </div>
          <!-- 商品操作区域 -->
         <div class="mui-card" v-for = "(item,index) in goodlist" :key="index">
            <div class="mui-card-header">
                <h4>{{item.title}}</h4>
            </div>
            <div class="mui-card-content">
                <p class="goodprice">
                    市场价 : <span style=" text-decoration: line-through">￥{{item.market_price}}</span>&nbsp;&nbsp;&nbsp;&nbsp;销售价 :<span>￥{{item.sell_price}}</span>  
                </p>
                <p class="goodsize">购买数量</p>
                <p>
                <mt-button type="primary" size="small">立即购买</mt-button>
                <mt-button type="danger" size="small">加入购物车</mt-button>
                </p>
            </div>
          </div>
          <!-- 商品的详细信息 -->
          <div class="mui-card" v-for = "(item,index) in goodlist" :key="item.id">
            <div class="mui-card-header">
                <h4>商品参数</h4>
            </div>
            <div class="mui-card-content">
                <p>商品货号 : {{item.goods_no}}</p>
                <p>库存情况 : {{item.stock_quantity}}</p>
                <p>上架时间 : {{item.add_time | time}}</p>
            </div>
            <hr>
            <div class="footer">
              <mt-button type="primary" size="large" class="button1" @click="gonhtml(id)">商品详情</mt-button>
              <mt-button type="danger" size="large">商品评论</mt-button>
            </div>
          </div>
      </div>
</template>
<script>
import { addgoodbannder,getgoodlist } from "@/api/index.js";
export default {
  data() {
    return {
      id: this.$route.params.id,
      goodbanderList: [],
      goodlist:[]
    };
  },
  created() {
    this.goodbander();
    this.getlist()
  },
  methods: {
    //   渲染轮播图
    goodbander(id) {
      addgoodbannder(this.id).then(res => {
        if (res.status === 0) {
          this.goodbanderList = res.message;
        }
      });
    },
    // 渲染数据
    getlist(id){
       getgoodlist(this.id).then(res =>{
            if (res.status === 0){
                 this.goodlist = res.message;
            }
       })
    },
    // 点击跳转到图文介绍
    gonhtml(id){
          this.$router.push({ path: "/goodslist/goodhtml/" + id });
    }
  }
};
</script>
<style lang="scss" scoped>
   .googof_list{
       .bander {
        height: 200px;
        text-align: center;
            img {
            height: 100%;
            padding: 5px 0;
            }
        }
       background-color: #eee;
       overflow: hidden;
       p{
           padding-left: 10px;
       }
       .goodprice{
           color: black;
           :nth-child(1){
            color: #9c9c9c;
            font-size: 12px;
           }
           :nth-child(2){
              font-size: 16px;
              font-weight: 700;
              color: red
           }
       }
       .footer{
           padding: 20px 5px ;
            .button1{
            display: block;
            margin-bottom: 10px;
            width: 100%;
         }
       }

   }
</style>

